extend ./layout/default

block main-content  
  .panel
    .ProfileContainer
      svg(width="40" height="40" data-jdenticon-hash="#{profileUser.hashId}")
      h1(style="color:#80bd01;display:inline") #{profileUser.name}
      span.certification   #{profileUser.activated ? 'certified' : 'not certified'}
      if user
        if user.name == profileUser.name
          td(style="width:80; align:right;")
            button#editProfile(style="display:block;") edit profile
        if user.name == 'admin'
          if profileUser.activated
            p
          else
            button.active active
      
      p email: #{profileUser.email}      
      p company: #{profileUser.company}
      p description: #{profileUser.description}
        
  .panel
    h2 Achievement
    .list
      each achievement in profileUser.achievements
        div.cscell(style="min-height:40px;overflow:auto;")
          div(style="width:90%;float:left;") #{achievement}
          if user.name == profileUser.name
            div.deleteAchievement(style="float:right;color:red;") X
    
        
    if user
      if user.name == profileUser.name
        td(style="width:80; align:right;")
          button#toggle Add Achievement
    .addachievementPanel.hidden
      textarea(style="display:block;margin-top:10px;width:100%;" rows=5)
      button#addAchievement add
      button#cancelAchievement cancel
    
              
  script.  
    $('#editProfile').click(function(){
      location.href = "/profile/edit"
    })
    $('.active').click(function(){
      $.get('/active_account/#{profileUser.name}', function(data){
        if(data.status === 'ok'){
          $('.certification').html('certified')
          $('button.active').remove()
        }
      })  
    })
    $('#toggle').click(function(){
      $('#toggle').hide()
      $('.addachievementPanel').removeClass("hidden")
    })
    $("#addAchievement").click(function(){
      var ac = $("textarea").val()
      $("textarea").val("")
      $.ajax({
        url: "/achievement",
        data:{text: ac},
        method: "post",
        success: function(data){
          if (data.status == "ok"){
            var p = document.createElement("div")
            p.style.float = "left"
            p.style.width = "90%"
            p.innerHTML = ac
            var btn = document.createElement('div')
            btn.style.float = "right"
            btn.style.color = "red"
            btn.innerHTML = 'X'
            btn.className = "deleteAchievement"
            btn.onclick = removeAc.bind(btn)
            var div = document.createElement('div')
            div.className = "cscell"
            div.style.minHeight = "40px"
            div.style.overflow = "auto"
            div.append(p)
            div.append(btn)
            $(".list").append(div)
            
          }
        }
      })
    })
    $("#cancelAchievement").click(function(){
      $("#toggle").show()
      $('.addachievementPanel').addClass("hidden")
    })
    var removeAc = function(){
      var parent = $(this).parent()
      var text = parent.children()[0].innerHTML
      parent.remove()
      $.ajax({
        url: "/achievement",
        data:{text: text},
        method: "delete",
        success: function(){}
      })
    }
    $(".deleteAchievement").click(function(){
      var parent = $(this).parent()
      var text = parent.children()[0].innerHTML
      parent.remove()
      $.ajax({
        url: "/achievement",
        data:{text: text},
        method: "delete",
        success: function(){}
      })
    })
    
